<template>
  <view>
    <u-popup :show="show" mode="bottom">
      <view class="top">
        <view class="top-search">
          <!-- <u-button type="info" size="mini" plain text="取消"></u-button> -->
          <span>取消</span>
          <view class="search-view">
            <u-search placeholder="搜索" height="30" v-model="searchKey" :clearabled="true" animation></u-search>
          </view>
          <!-- <u-button type="primary" size="mini" text="确定"></u-button> -->
          <span>确定</span>

        </view>
        <view>
          <span v-for="(item, index) in selected" :key="index">
            {{ item.label }}

            <span v-if="index < selected.length - 1"> / </span>
          </span>
        </view>
      </view>
      <scroll-view style="height: 60vh" scroll-y="true">
        <view class="list-body">
          <u-cell-group>
            <u-radio-group v-model="check1" placement="column" @change="groupChange">
              <view v-for="(item, index) in list" :key="index">
                <view class="label">
                  <u-cell :title="item.label" :label="item.code" :name="item.code" center clickable @click="cellClick">
                    <u-radio slot="right-icon" :name="item.code"></u-radio>
                  </u-cell>
                </view>
              </view>
            </u-radio-group>
          </u-cell-group>
        </view>
      </scroll-view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      xzqhTree: [],
      searchKey: '',
      list: [],
      check1: '',
      selected: [],
      xzqhbh: '',
    };
  },
  props: {
    show: {
      type: Boolean,
      default: true,
    },
  },
  async mounted() {
    this.xzqhTree = await this.getXzqhTree();
    this.xzqhbh = '340123';
    this.list = this.findXzqhItme(this.xzqhbh).children;
  },
  methods: {
    async getXzqhTree() {
      let tree = this.$cache.get('xzqhTree');
      if (tree) {
        return tree;
      }
      const url = '/jcpz/xzqh/treeselect';
      const res = await this.$get(url);
      this.$cache.set('xzqhTree', res.data);
      if (res.code == 200) {
        this.$cache.set('xzqhTree', res.data);
        return res.data;
      }
      return [];
    },
    groupChange(name) {
      console.log(name);
    },
    cellClick(item) {
      const xzqh = this.list.find(i => i.code == item.name);

      if (xzqh.children && xzqh.children.length > 0) {
        this.selected.push({ ...xzqh, children: undefined });
        this.nextTo(xzqh.code);
      }
    },

    nextTo(xzqhbh) {
      this.xzqhbh = xzqhbh;
      this.list = this.findXzqhItme(this.xzqhbh).children;
    },

    findXzqhItme(xzqhbh, zList = this.xzqhTree) {
      for (const item of zList) {
        if (xzqhbh.includes(item.code)) {
          if (xzqhbh == item.code) {
            return item || {};
          } else {
            return this.findXzqhItme(xzqhbh, item.children) || {};
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  .top-search {
    display: flex;
    padding: 20rpx;
    background-color: #f7f8fc;
    .search-view {
      background-color: #f7f8fc;
      padding: 20rpx;
      display: flex;
    }
  }
}
</style>
